import React, { Component } from 'react';
import '../../styles/classify.scss'
import { SideBar, SearchBar } from 'antd-mobile'
import Header from '../../components/MyHeader/header'
import Carousel from '../../components/MyHeader/carousel'
import { classify_arr, classify_list } from '../../apis/api'
class classify extends Component {

    // 挂载期 ( 挂载期的方法会自动执行, 而且只执行一次 )
    // constructor(props){
    //     super(props);
    //     this.state = {} //初始化组件状态
    // };
    state = {
        currentIndex: 0,
        list: [],//一级分类
        data: [],    //二级分类
        activeKey: null,
    }
    toSearch=() =>{
        this.props.history.push({pathname:"/search"})
    }
    componentDidMount() {
        // console.log('{}',!!{});
        // console.log('[]', !![]);
        // console.log('{}',!!Object.keys({}).length);
        // console.log('[]',!![].length);
        // console.log('{}.billboards',{}.billboards,!!{}.billboards);
        classify_list().then((ref) => {
            console.log(ref.data);
            this.setState({
                list: ref.data.list,
            }, () => {
                // console.log(this.state.list);
                if (this.state.list.length) {
                    this.handleChange(this.state.list[0].id + '')
                }
            })
        })
    }
    //点击sidebar组件的按钮时调用,通过key参数获取当前点击按钮的id (一级分类的id)
    handleChange = (key) => {
        //发请求获取二三级分类
        this.setState({
            activeKey: key
        })
        classify_arr({ id: key }).then((res) => {
            console.log(res.data);
            this.setState({
                data: res.data.subcate
            })
        })
    }
    toAllgood = (id,title) => {
        console.log(id,title);
        let query = {
            pathname: '/categorySearch',
            state: {
                id,
                title
            }
        }
        this.props.history.push(query)
        // this.props.history.push('/categorySearch', { id })
    }

    render() {
        return (
            <div className='classify'>
                <div className='headers'>
                    <Header back={null} title='分类' />
                    <SearchBar placeholder='搜索店铺内商品' onFocus={this.toSearch}/>
                </div>

                <div className='box'>
                    {/* 借助SideBar组件渲染左侧一级分类, 一个SideBar.Item就是一个一级分类 */}
                    <SideBar onChange={this.handleChange} activeKey={this.state.activeKey}>
                        {
                            //渲染一级分类列表
                            this.state.list.map(item => (
                                <SideBar.Item key={item.id} title={item.name} />
                            ))
                        }
                    </SideBar>
                    <div className="subcate">
                        <div className='aa'>
                            {/* {this.state.data.billboards&&this.state.data.billboards.length?<Carousel data={this.state.data.billboards}></Carousel>:null} */}
                            <Carousel data={this.state.data.billboards}></Carousel>

                        </div>

                        {
                            //渲染二级分类列表

                            //判断是否请求到二三级分类数据,请求到数据再执行 xxx.map 渲染, 否则不执行, 这样可以避免组件初次渲染报错.
                            this.state.data.subcategory &&
                            this.state.data.subcategory.map((item2, index) => {
                                return (
                                    <div className="cate2" key={index}>
                                        <div className="name">{item2.name}</div>
                                        <div className="list">
                                            {
                                                // 渲染三级分类列表
                                                item2.subNavs.map((item3, index) => {
                                                    return (
                                                        <div onClick={() => { this.toAllgood(item3.id,item3.name) }} className="cate3" key={index}>
                                                            <img src={item3.pic} alt="" />
                                                            <div className="text">{item3.name}</div>
                                                        </div>
                                                    )
                                                })
                                            }
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default classify;